<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 冲塔怪
  Date: 2022/5/1
  Time: 16:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/jsp/common/left.jsp"%>
<html>
<head>
    <title>水果管理</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //给删除的a标签绑定单击事件，防止误触。
            $("a.deleteClass").click(function () {
                return confirm("确认删除《"+$(this).parent().parent().find("td:nth-child(2)").text()+"》吗？");
            });

            $("#searchPageBtn").click(function () {
                var pageNo = $("#pn_input").val();
                location.href = "${pageScope.basePath}${requestScope.page.url}&pageNo="+pageNo;
            });
            $("#resetPageBtn").click(function () {
                location.href = "good?action=page&pageNo=1";
            });
        });
    </script>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
        .main{
            margin-left: 160px;
        }

        .header {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
            font-size: 30px;
        }
        .content {
            margin-left: 15%;
            background-color: #ffffff;
            padding: 10px;
            //height: 200px; /* Should be removed. Only for demonstration */
        }
        table{
            border: 1px solid;
            border-collapse: collapse;
            table-layout: fixed;  /*fiexed 列宽由表格宽度和列宽度设定。 默认。列宽度由单元格内容设定。*/
            word-break: break-all;   /*允许在单词内换行*/
            overflow:auto;
            text-align: center;
        }
        table tr td{
            border: 1px solid;
        }
        .footer {
            background-color: #f1f1f1;
            padding: 10px;
            text-align: center;
        }

        .search{
            width: 100%;
            margin-top: 10px;
        }

        .search_0{
            margin-left: 35%;
        }
        .search_price{
            width: 60px;
            height: 25px;
        }
        .search_0_search{
            width: 304px;
            height: 25px;
        }
        #pn_input{
            width: 40px;
            height: 22px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="header"><h2>水果后台管理</h2></div>
    <div class="search">
        <div class="search_0">
            <div>
                <form action="good" method="get">
                    <input type="hidden" name="action" value="pageBySearch">
                    <input class="search_0_search" type="text" name="name" value="${param.name}" placeholder="请输入水果名称"><br><br>
                    <input type="hidden" name="action" value="pageByPrice">
                    <input class="search_price" type="text" name="min" value="${param.min}" placeholder="￥" > -
                    <input class="search_price" type="text" name="max" value="${param.max}" placeholder="￥" > 元
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="submit" value="查询">
                    <input id="resetPageBtn" type="button" value="清空">
                </form>
            </div>
        </div>
    </div>
    <div class="content">
            <table class="border">
                <tr>
                    <td width="150px">id</td>
                    <td width="150px">名称</td>
                    <td width="150px">价格</td>
                    <td width="150px">销量</td>
                    <td width="150px">库存</td>
                    <td width="150px" colspan="2">操作</td>
                </tr>

                <c:forEach items="${requestScope.page.items}" var="good">
                    <tr>
                        <td>${good.id}</td>
                        <td>${good.name}</td>
                        <td>${good.price}</td>
                        <td>${good.sales}</td>
                        <td>${good.stock}</td>
                        <td><a href="${pageContext.request.contextPath}/manage/good?action=getGood&id=${good.id}&method=update&pageNo=${param.pageNo}">修改</a></td>
                        <td><a class="deleteClass" href="${pageContext.request.contextPath}/manage/good?action=delete&id=${good.id}&pageNo=${param.pageNo}">删除</a></td>
                    </tr>

                </c:forEach>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td><a href="${pageContext.request.contextPath}/jsp/manager/good_edit.jsp?method=add&pageNo=${requestScope.page.pageTotal}">添加商品</a></td>
                </tr>
            </table>
    </div>
    <div class="footer">
        <!-- 大于第一页，才显示 -->
        <c:if test="${requestScope.page.pageNo > 1}">
            <a href="${pageScope.basePath}${requestScope.page.url}&pageNo=1">首页</a>
            <a href="${pageScope.basePath}${requestScope.page.url}&pageNo=${requestScope.page.pageNo-1}">上一页</a>
            <a href="${pageScope.basePath}${requestScope.page.url}&pageNo=${requestScope.page.pageNo-1}">${requestScope.page.pageNo-1}</a>
        </c:if>

        【${requestScope.page.pageNo}】

        <c:if test="${requestScope.page.pageNo < requestScope.page.pageTotal}">
            <a href="${pageScope.basePath}${requestScope.page.url}&pageNo=${requestScope.page.pageNo+1}">${requestScope.page.pageNo+1}</a>
            <a href="${pageScope.basePath}${requestScope.page.url}&pageNo=${requestScope.page.pageNo+1}">下一页</a>
            <a href="${pageScope.basePath}${requestScope.page.url}&pageNo=${requestScope.page.pageTotal}">末页</a>
        </c:if>
        共${requestScope.page.pageTotal}页 ${requestScope.page.pageTotalCount}条记录
        到第<input name="pn" id="pn_input">页
        <input id="searchPageBtn" type="button" value="确定">
    </div>
</div>
</body>
</html>
